/**企业列表 */
<template>
  <div class="invoice-page">
    <div class="invoice-top-box">
      <el-card shadow="always">
        <div slot="header">
          <line-header title="企业信息列表"></line-header>
        </div>
        <div class="card-body">
          <el-row style="display: flex; align-items: center;">
            <el-col :span="4">
              <span class="top-title-box">企业信息数据：</span>
            </el-col>
            <el-col :span="5">
              <span class="top-title-box">已认证</span>
              <el-tag>{{auditedCount}}</el-tag>
            </el-col>
            <el-col :span="5">
              <span class="top-title-box">未认证</span>
              <el-tag>{{auditingCount}}</el-tag>
            </el-col>

            <el-col :span="5">
              <span class="top-title-box">运行中</span>
              <el-tag>{{goingCount}}</el-tag>
            </el-col>

            <el-col :span="5">
              <span class="top-title-box">已禁用</span>
              <el-tag>{{forbidCount}}</el-tag>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
    <div class="invoice-bottom-box">
      <el-card shadow="always">
        <div slot="header">
          <line-header title="列表"></line-header>
        </div>
        <div class="card-body">
          <div class="table-top-box">
            <div class="top-left-box">
              <el-input
                v-model="invoiceUser"
                placeholder="搜索用户名"
              ></el-input>
              <el-input
                v-model="companyName"
                placeholder="搜索企业名"
              ></el-input>

            </div>
            <div class="top-right-box">
              <el-button type="primary" @click="hkLoadList">筛选</el-button>
            </div>
          </div>

          <div class="table-box">
            <el-table
              :data="tableList"
              style="width: 100%"
              header-cell-class-name="header-cell-class-name"
              stripe
              border
            >
              <el-table-column prop="id" label="编号" align="center">
                <template slot-scope="scope">{{ pageSize*(currentPage-1)+ scope.$index+1 }}</template>
              </el-table-column>
              <el-table-column prop="account" label="用户名" align="center">
              </el-table-column>
              <el-table-column prop="officialNetName" label="企业名称" align="center">
              </el-table-column>
              <el-table-column prop="officialNet" label="站点信息" align="center">
              </el-table-column>
              <el-table-column prop="isAudit" label="是否已认证" align="center">
                <template slot-scope="{ row }">
                  <div>{{row.isAudit==1?"是":"否"}}</div>
                </template>
              </el-table-column>

              <el-table-column
                prop="createTime"
                label="提交时间"
                align="center"
              >
                <template slot-scope="{ row }">
                  <div>{{hkGetTimeFmt(row.createTime)}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="finishTime" label="状态" align="center">
                <template slot-scope="{ row }">
                  <div v-if="row.enable==1">{{"运行中"}}</div>
                  <div v-else>{{"已禁用"}}</div>

                </template>
              </el-table-column

              >
              <el-table-column label="操作" align="center">
                <template slot-scope="{ row }">
                  <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-view"
                    plain
                    @click="hkClickLook(row)"
                    v-if="row.isVerify"
                  >查看
                  </el-button>
                  <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-view"
                    plain
                    @click="forbidden(row)"
                    v-if="row.enable==1"
                  >禁用
                  </el-button>
                  <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-view"
                    plain
                    @click="setUp(row)"
                    v-else
                  >启用
                  </el-button>

                </template>
              </el-table-column>
            </el-table>
            <div class="pagination-box">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[20, 50, 100]"
                :page-size="20"
                :total="total"
                layout=" prev, pager, next,sizes,jumper"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
  import LineHeader from "@/components/line-header/index";
  import {invoiceStatusList, invoiceClass, hkGetTimeFmt} from "@/utils/tools";
  import {trace} from "@/utils/trace"
  import {mapGetters} from "vuex"
  import {getUserList} from "../../api/user"
  import {hkPut} from "../../api/http"


  export default {
    components: {LineHeader},
    props: {},
    data() {
      return {
        auditedCount: 0,
        auditingCount: 0,
        goingCount: 0,
        forbidCount: 0,

        hkGetTimeFmt: hkGetTimeFmt,
        currentPage: 1,
        pageSize: 20,
        total: 400,
        invoiceNum:0,
        invoiceUser:"",
        companyName:"",
        tableList: [],
        invoiceClass: invoiceClass,
        statusList: invoiceStatusList
      };
    },
    filters: {
      filiterTagType(val) {
        return invoiceStatusList.find(item => {
          return item.key == val;
        }).type;
      },
      filiterTagText(val) {
        return invoiceStatusList.find(item => {
          return item.key == val;
        }).label;
      }
    },
    watch: {},
    computed: {
      ...mapGetters(["userInfo"])
    },
    methods: {
      //筛选
      async hkLoadList() {
        trace("企业信息列表查询", this.invoiceUser, this.companyName);
        let page = this.currentPage;
        let count = this.pageSize;
        let direction = 1;
        let account = this.invoiceUser;
        let companyName = this.companyName;

        let res = await getUserList({ page, count, direction,account,companyName});
        if (res.code == 2000) {
          this.auditedCount = res.data.auditedCount;
          this.auditingCount = res.data.auditingCount;
          this.goingCount = res.data.goingCount;
          this.forbidCount = res.data.forbidCount;
          this.total = res.data.total;

          this.tableList = [];
          trace("hh-list",res.data.data)
          res.data.data.map(item=>{
            // // if(item.officialNet.length>12){
            this.tableList.push(item);
            // if(item.officialNet==null){
            //   item.officialNet="--"
            // }
            // // }
          })
        } else {
          trace("getUserList-err",res)
        }
      },
      //查看
      hkClickLook(item) {
        let path = "/verify/detail";
        this.$router.push({
          path: path,
          query: { id: item.vid }
        });
      },

      //禁用
      async forbidden(item) {
        let id = item.id;
        let status = 2;
        let res = await hkPut("/user/enable", {id, status});
        if(res.code==2000){
          this.getList();
        }
      },

      //启用
      async setUp(item){
        let id = item.id;
        let status = 1;
        let res = await hkPut("/user/enable", {id, status});
        if(res.code==2000){
          this.getList();
        }
      },
      handleSizeChange(value) {
        this.pageSize = value;
        this.currentPage = 1;
        this.getList();
      },
      handleCurrentChange(value) {
        this.currentPage = value;
        this.getList();
      },
     //工具方法通过遍历
      eraseNull(item){
        for( let k of Object.keys(item)) {
          if(item[k] === "null" ) {
            item[k] = "--"
          }
          if(item[k] === null) {
            item[k] = "--"
          }
        }
        return item
      },
      async getList() {
        let page = this.currentPage;
        let count = this.pageSize;
        let direction = 1;
        let role = 2;

        let res = await getUserList({page, count, direction, role});
        if (res.code == 2000) {
          this.auditedCount = res.data.auditedCount;
          this.auditingCount = res.data.auditingCount;
          this.goingCount = res.data.goingCount;
          this.forbidCount = res.data.forbidCount;
          this.total = res.data.total;

          this.tableList = [];
          trace("hh-list",res.data.data)
          // this.tableList.push(...res.data.data.map(this.eraseNull))
          res.data.data.forEach(item=>{
            // // if(item.officialNet.length>12){
            item = this.eraseNull(item)
              this.tableList.push(item);
            // // }
          })
        } else {
          trace("getUserList-err",res)
        }
      },
    },
    created() {
      this.getList();



    },
    mounted() {
    }
  };
</script>
<style lang="scss" scoped>
  .invoice-page{
    padding: 20px 36px 50px 36px;
    background-color: #ecf0f3;
    min-height: calc(100vh - 96px);
  }
  .invoice-top-box {
    .card-body {
      .top-title-box {
        margin-right: 10px;
      }
    }
  }

  ::v-deep .header-cell-class-name {
    background: #ecf0f3;
  }
  ::v-deep .el-table .cell{
    display: flex;
    flex-direction: column;
    justify-content: center;

    .el-button+.el-button {
       margin: 10px 0 0;
    }
  }

  .invoice-bottom-box {
    margin-top: 30px;

    .table-top-box {
      display: flex;
      align-items: center;

      margin-bottom: 2rem;

      .top-left-box {
        .el-select {
          width: 120px;
          margin: 0 5px;
        }

        .el-input {
          width: 180px;
          margin: 0 5px;
        }
      }
    }

    .table-bottom-box {
      margin: 20px 5px;
    }
  }
</style>
